<?php include_once("../header.php") ?>
    <title>项目管理</title>
    <style>
     .pagination
     {
       text-align:center;
     }
     .tt
     {
       list-style-type:none;
     }
     .enumtype div
     {
       float:left;
     }
     ul a
     {
       cursor:pointer;
     }
    </style>
    <script>
     $(function(){
       //ajax加载枚举类型
       function loadEnum()
       {
         $.ajax({
           url:'../../ctl/index.php?ctl=Enum&ac=query',
           method:'get',
           dataType:'json',
           data:{
             pid:'-1'
           },
           success:function(json)
           {    
             $("ul").on('click','a',function(){initTable(this.id);});
            $("tbody").on('click',"input[type='button']",function(){
               eval(this.id+"Rec(this)");
             });
             initMenu(json);
           },
           error:function()
           {
             alert("出错了");
           }
         });
       }
       loadEnum();
     });
     //delete a record
     function deleteRec(obj)
     {
       var content = "<p><font color='red'><i class='icon-warning' style='font-size:30px;'></i>你确定要删除么?</font></p>";
       $.Dialog({
         'title':'警告',
         'content':content,
         'draggable':true,
         'closeButton':true,
         'buttonsAlign':'right',
         'buttons':{
           '删除':{
             'action':function(){               
               var ck = $(obj).parent().parent().find("input[type='checkbox']");
               $.ajax({
                 url:'../../ctl/index.php?ctl=Enum&ac=delRec',
                 method:'POST',
                 dataType:'json',
                 data:{
                   strpid:ck.attr("id"),
                   streid:ck.val()
                 },
                 success:function(data){
                   if(data.status="suc")
                   {
                     $(obj).parents("tr").remove();
                     if($("tbody").find("td").length==0)
                     $("tbody").append("<tr><td colspan='4' align='center'><a href='javascript:addRec()'>没有数据,新建一个吧~</a></td></tr>");
                   }
                 },
                 error:function(){
                   alert("error---------");
                 }
               });
             }
           },
           '取消':{}
         }
       });
     }
     function editRec(btn)
     {
       var ck = $(btn).parent().parent().find("input[type='checkbox']");
       var content = "<form id='addRec'>";
       content += "<input type='hidden' name='strpid' value='"+ck.attr("id")+"'/>"
       content += "<input type='hidden' name='streid' value='"+ck.val()+"'/>"
       content += "<div class='input-control text'><input type='text' name='strname' value='"+$(btn).parent().prev("td").prev("td").text()+"'/><button class='helper'></button></div>";
       content += "<div class='input-control text'><input type='text' name='strvalue' value='"+$(btn).parent().prev("td").text()+"'/><button class='helper'></button></div>";
       content += "</form>"
       $.Dialog({
         'title':'编辑记录',
         'content':content,
         'draggable':true,
         'closeButton':true,
         'buttonsAlign':'right',
         'buttons':{
           '提交':{
             'action':function(){
               $.ajax({
                 url:'../../ctl/index.php?ctl=Enum&ac=editRec',
                 method:'POST',
                 dataType:'json',
                 data:$("#addRec").serialize(),
                 success:function(data){
                   if(data.status=="suc")
                   {
                     $(btn).parent().prev("td").text(data.strvalue);
                     $(btn).parent().prev("td").prev("td").text(data.strname);
                     //$("tbody").append("<tr><td style='width:100px;'><label class='input-control checkbox'><input type='checkbox' value='"+data.streid+"' id='"+data.strpid+"'><span class='helper'></span></label></td><td>"+decodeURI(data.strname)+"</td><td>"+decodeURI(data.strvalue)+"</td><td><input type='button' value='编辑' id='edit'/>&nbsp;<input type='button' value='删除' id='delete'/></td></tr>");
                   }
                 },
                 error:function(){
                   alert("error");
                 }
               });
             }
           }
         }
       });
     }
     //init the enum type
     function initMenu(obj)
     {
       for(var i = 0;i<obj.length;i++)
       $("[name='enumType']").append("<li name='ck'><div><i class='icon-IE' style='float:left;'></i><h4><a id='"+obj[i]["streid"]+"'>"+decodeURI(obj[i]["strname"])+"</a></h4></div></li>");
     }
     function initTable(id)
     {
       $.ajax({
         url:'../../ctl/index.php?ctl=Enum&ac=query',
         method:'get',
         dataType:'json',
         data:{
           pid:id
         },
         success:function(obj)
         {
           $("#addBtn").attr("name",id);
           $("tbody").html("");
           if(obj.length==0)
           {
             $("tbody").append("<tr><td colspan='4' align='center'><a href='javascript:addRec()'>没有数据,新建一个吧~</a></td></tr>");
             $("#addBtn").animate({opacity:'0.1',},700,function(){$("#addBtn").css("opacity","1");})
             return;
           }
           for(var i=0;i<obj.length;i++)
           {
             $("tbody").append("<tr><td style='width:100px;'><label class='input-control checkbox'><input type='checkbox' value='"+obj[i]["streid"]+"' id='"+obj[i]["strpid"]+"'><span class='helper'></span></label></td><td>"+obj[i]["strname"]+"</td><td>"+obj[i]["strvalue"]+"</td><td><input type='button' value='编辑' id='edit'/>&nbsp;<input type='button' value='删除' id='delete'/></td></tr>");
           }
         },
         error:function(){}
       });
     }
     //add a new record
     function addRec(src=$("#addBtn"))
     {
       if($(src).attr("name")==-2)return;
       var content = "<form id='addRec'>";
       content += "<input type='hidden' name='strpid' value='"+$(src).attr("name")+"'/>"
       content += "<div class='input-control text'><input type='text' name='strname' placeHolder='命名'/><button class='helper'></button></div>";
       content += "<div class='input-control text'><input type='text' name='strvalue' placeHolder='值'/><button class='helper'></button></div>";
       content += "</form>"
       $.Dialog({
         'title':'增加新记录',
         'content':content,
         'draggable':true,
         'closeButton':true,
         'buttonsAlign':'right',
         'buttons':{
           '提交':{
             'action':function(){
               $.ajax({
                 url:'../../ctl/index.php?ctl=Enum&ac=addRec',
                 method:'POST',
                 dataType:'json',
                 data:$("#addRec").serialize(),
                 success:function(data){
                   if(data.status=="suc")
                   {
                     if(data.strpid==-1)
                     {
                       $("[name='enumType']").append("<li name='ck'><div><i class='icon-IE' style='float:left;'></i><h4><a id='"+data.streid+"'>"+decodeURI(data.strname)+"</a></h4></div></li>");
                       return;
                     }
                     if($("tbody").find("td").length<=1)$("tbody").html("");
                     $("tbody").append("<tr><td style='width:100px;'><label class='input-control checkbox'><input type='checkbox' value='"+data.streid+"' id='"+data.strpid+"'><span class='helper'></span></label></td><td>"+decodeURI(data.strname)+"</td><td>"+decodeURI(data.strvalue)+"</td><td><input type='button' value='编辑' id='edit'/>&nbsp;<input type='button' value='删除' id='delete'/></td></tr>");
                   }
                 },
                 error:function(){
                   alert("error");
                 }
               });
             }
           }
         }
       });
     }
    </script>
<head>
  <body class="metrouicss">
  <div style="width:80%;margin:auto;padding:2px;">
    <!-- top -->
    <?php include_once("../menu.php") ?>
    <!-- left  -->
    <div style="width:20%;height:100%;background:#CCCCCC;float:left;padding:10px 10px 10px 20px;">
      <h3>枚举类型</h3>
      <ul style="list-style-type:none;" name="enumType">
        <li>
          <div class="border-color-red">
            <i class="icon-IE" style="float:left;"></i>
            <h4>地址管理</h4>
          </div>
        </li>
      </ul>
      <a style="text-align:center;margin:5px 10px 10px 15px;">
        <button class="default" onclick="addRec(this)" name="-1">新建</button>
      </a>
    </div>
    
    <div style="float:left;width:80%;padding:10px;">
      <h3>枚举内容</h3>
      <div style="float:right;">
        <button onclick="addRec(this)" id="addBtn" name="-2">新增</button>
      </div>
      <table class="hovered">
        <thead>
          <tr>
            <th >编号</th>
            <th width="25%">命名</th>
            <th width="25%">值</th>
            <th>&nbsp;</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
      <div class="pagination">
        <ul>
          <li class="first"><a></a></li>
          <li class="prev"><a></a></li>
          <li class="disabled"><a>1</a></li>
          <li class="active"><a>2</a></li>
          <li class="active"><a>3</a></li>
          <li class="spaces"><a>...</a></li>
          <li class="active"><a>499</a></li>
          <li class="active"><a>500</a></li>
          <li class="next"><a></a></li>
          <li class="last"><a></a></li>
        </ul>
      </div>
    </div>

  </div>    
</body>
</html>